<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>
      <p>{{ obj.nested.count }}</p>
      <p>{{ obj.arr }}</p>
      <p>{{ obj.aaa }}</p>
      <p>{{ obj }}</p>
    </div>
    <button @click="mutateDeeply">数值增加</button>
    <button @click="changeObj">更改对象</button>
  </div>
</template>
<script setup>
import { nextTick } from "vue";
import { ref } from "vue";

const count = ref(0);
const str=ref('jkk')
const obj = ref({
  nested: { count: 0 },
  arr: ["foo", "bar"],
  aaa: 5,
});
function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++;
  obj.value.arr.push("baz");
  obj.value.aaa = 6;
  str.value='kklt'
}
function changeObj() {
  obj.value = {
    ...obj.value,
    kkx: "已变身",
  };
}

async function increment() {
  count.value++;
  await nextTick();
  console.log("dom已经更新", count.value);
  //现在 DOM 已经更新了
}
</script>
<style>
@media (min-width: 2024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
